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History of Team Fortress 
Characters 

• Art direction 

• Shading algorithms 

Environments 
Meet the Team 
Post-ship 

Sneak Peek of the next Meet the Team short! 






INITIAL TEAM FORTRESS 2 







TEAM FORTRESS 2 








WHY THE UNIQUE VISUAL STYLE? 


• Gameplay 

• Readability 

• Branding 



READ HIERARCHY 

• T earn - Friend or Foe? 

• Color 

• Class - Run or Attack? 

• Distinctive silhouettes 

• Body proportions 

• Weapons 

• Shoes, hats and clothing folds 

• Selected weapon - What’s he packin’? 

• Highest contrast at chest level, where weapon is held 

• Gradient from dark feet to light chest 



Color Swatch 
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EARLY 20TH CENTURY COMMERCIAL ILLUSTRATION 


• Chose to adopt specific conventions of the 
commercial illustrator J. C. Leyendecker: 

• Shading obeys a warm-to-cool hue shift. Shadows go to 
cool, not black 

• Saturation increases at the terminator with respect to a given 
light source. The terminator is often reddened. 

• On characters, interior details such as clothing folds are 
chosen to echo silhouette shapes 

• Silhouettes are often emphasized with rim highlights rather 
than dark outlines 



Clothing Folds 


J.C. Leyendecker 
Thanksgiving 1628-1928 


J.C. Leyendecker 
Tally-Ho, 1930 




J.C. Leyendecker 
Arrow collar advertisement, 1929 



J.C. Leyendecker 
Swimmin’ Hole, 1935 






CHARACTER CREATION 


1. Character silhouette 

2. Interior shapes 

3. Model sheet 

4. 3D Model 

5. Character Skin 

6. Final Character in game 





CHARACTER SILHOUETTE 




Building block of character design 
Identifiable at first read 




• Solving interior character 
design with shadow shapes 

• Keep it iconic 

• Work out design in three 
quarter pose 






• Use concept painting as 
guide 

• Solve design problems using 
silhouette only 

• Solve interior design with 
shadow shapes 






3D MODEL 


• Match silhouette to model 
sheet 

• Solve 3 quarter design with 
screenshots / paintovers 

• Model with character in mind 





BASE AMBIENT OCCLUSION MAP 




CHARACTER SKIN 










ENGINEER CONCEPT 

















CHARACTER SHADING ALGORITHM 


• Previous work in Non-Photorealistic Rendering 

• Character lighting equation in Team Fortress 2 



GOOCH, 1998 





Hue and luminance shifts indicate surface 
orientation relative to light 

Blend between warm and cool based upon 
unclamped Lambertian term, underlying albedo 
and some free parameters 

Extreme lights and darks are reserved for edge 
lines and highlights 


Conventional Gooch 
Shading Shading 





HALF LAMBERT 


• Typically clamp 
N-L to zero at the 
terminator 

• Half Lambert - 

scales the -1 to 1 

cosine term (red 
curve) by V 2 , 
biases by V 2 and 
squares to pull the 
light all the way 
around (blue 
curve) 

• We have been applying this 
curve since Half-Life in 1998 

• Similar to Exaggerated Shading 
[Rusinkiewicz06] 





• Lake used a ID texture lookup 
based upon the Lambertian term 
to simulate the limited color 
palette cartoonists use for 
painting cels 

• Also allows for the inclusion of a 
view-independent pseudo 
specular highlight by including a 
small number of bright texels at 
the “lit” end of the ID texture map 




NL ► 




• Barla has extended this technique by using a 2D texture lookup to 
incorporate view-dependent and level-of-detail effects. 

• Fresnel-like creates a hard “virtual backlight” which is essentially a 
rim-lighting term, though this term is not designed to correspond to 
any particular lighting environment. 




CHARACTER LIGHTING EQUATION 



/IEW INDEPENDENT 




VIEW-DEPENDENT 






Spatially-varying directional 
ambient 





• Spatially-varying directional 
ambient 

• Modified Lambertian terms 






• Spatially-varying directional 
ambient 

• Modified Lambertian terms 

• Undamped Lambertian term 
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• Spatially-varying directional 
ambient 


• Modified Lambertian terms 

• Undamped Lambertian term 

• Scale, bias and exponent 






VIEW INDEPENDENT TERM? 



• Spatially-varying directional 
ambient 

• Modified Lambertian terms 

• Undamped Lambertian term 

• Scale, bias and exponent 


• Warping function 
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• Spatially-varying directional 
ambient 

• Modified Lambertian terms 

• Undamped Lambertian term 

• Scale, bias and exponent 

• Warping function 

• Albedo 





• Multiple Phong terms per light 



• Multiple Phong terms per light 
• k rim broad, constant exponent 
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• Multiple Phong terms per light 
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• Multiple Phong terms per light 

• k rim broad, constant exponent 

• k spec exponent (constant or texture) 

• f s artist tuned Fresnel term 

• f r rim Fresnel term, (l-(n-v)) 4 

• k r rim mask texture 

• k s specular mask texture 

• Dedicated rim lighting 

• a(v) Directional ambient evaluated with v 

• k r same rim mask 
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• Multiple Phong terms per light 

• k rim broad, constant exponent 

• k spec exponent (constant or texture) 

• f s artist tuned Fresnel term 

• f r rim Fresnel term, (l-(n-v)) 4 

• k r rim mask texture 

• k s specular mask texture 

• Dedicated rim lighting 

• a(v) Directional ambient evaluated with v 

• k r same rim mask 

• f r same rim Fresnel 
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(n ■ u) f r k r a(v) 


• Multiple Phong terms per light 

• k rim broad, constant exponent 

• k spec exponent (constant or texture) 

• f s artist tuned Fresnel term 

• f r rim Fresnel term, (l-(n-v)) 4 

• k r rim mask texture 

• k s specular mask texture 

• Dedicated rim lighting 

• a(v) Directional ambient evaluated with v 

• k r same rim mask 

• f r same rim Fresnel 

• n-u term that makes rim highlights tend to 
come from above (u is up vector) 
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• Multiple Phong terms per light 

• k rim broad, constant exponent 

• k spec exponent (constant or texture) 

• f s artist tuned Fresnel term 

• f r rim Fresnel term, (l-(n-v)) 4 
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• Creating a compelling, 
immersive world 

• Team distinction through 
material hue/value/saturation. 

• Impressionistic painterly look 




CONTRASTING TEAM PROPERTIES 


• Red 

• Warm colors 

• Natural materials 

• Angular geometry 

• Blue 

• Cool colors 

• Industrial materials 

• Orthogonal forms 
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IMPRESSIONISTIC TEXTURES 





• Can easily imagine a 3D camera 
move between these 2D views of 
the same space 









WORLD TEXTURING 



















CLASS = CHARACTER 


• Defined personalities and 
archetypes up front 

• Consistent voice casting 

• In-game taunt animations and 
context-sensitive emotes 

• “So much blood...” 

• Meet the Team shorts 

• Character vignette movies 
rendered with game engine 

• Game assets except: 

• Up-rezzed hands 

• More facial morph targets 

• More facial wrinkle maps 

• We find ourselves mixing the 
terms “Class” and “Character” 





HOW DID TAN? REACT? 
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WHERE DO WE GO FROM HERE? 






Successful multiplayer games live for a long time 
Regular updates via Steam 

• Shipped 28 times since the Beta in September 

• New features, code optimizations and exploit fixes 

• This is why we built Steam & Steamworks in the first place 


STEAM 

- ^ 

STEAMWORKS " 


• Steam is not just a digital distribution system 

• Can ship updates extremely quickly and fully engage the community 


Extend experience for dedicated players 

• Maps 

• Game modes 

• Achievements 

Unlockable weapons in Team Fortress 2 

• Can ship more quickly than new maps and game modes 








• Things to look for... 

• Distinct character classes 


• Shape and Shading 

• Analogous color palette 

• Painterly world texturing 



• History 

• Characters 

• Art direction 

• Shading algorithms 

• Environments 

• Meet the Team 

• Post-ship 

• Meet the Scout 
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• Art History, Cinematography & Graphic Design 

• Painting with Light by John Alton 

• The Science of Art: Optical Themes in Western Art from 
Brunelleschi to Seurat by Martin Kemp 

• Secret knowledge: Rediscovering the Lost Techniques 
of the Old Masters by David Hockney 

• On Reflection by Jonathan Miller 

• Anything by Edward Tufte or Marcel Minnaert 



